<template>
  <view class="sidebar" :class="{ 'sidebar-right': position === 'right', 'sidebar-left': position === 'left' }" :style="sidebarStyle">
    <view class="sidebar-container">
      <view 
        v-for="item in items" 
        :key="item.id"
        class="sidebar-item"
        @tap="onItemClick(item)"
      >
        <image 
          class="sidebar-icon" 
          :src="sheep.$url.cdn(item.iconUrl)" 
          mode="aspectFit"
        />
      </view>
    </view>
  </view>

  <!-- 弹窗组件 -->
  <s-sidebar-modal 
    v-if="showModal"
    :visible="showModal"
    :item="selectedItem"
    @close="onCloseModal"
  />
</template>

<script setup>
import { computed, ref } from 'vue';
import sheep from '@/sheep';
import SSidebarModal from './components/s-sidebar-modal.vue';

const props = defineProps({
  position: {
    type: String,
    default: 'right',
    validator: (value) => ['left', 'right'].includes(value)
  },
  top: {
    type: [Number, String],
    default: 200
  },
  items: {
    type: Array,
    default: () => []
  },
  style: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['itemClick']);

const showModal = ref(false);
const selectedItem = ref(null);

// 计算侧边栏样式
const sidebarStyle = computed(() => {
  const topValue = typeof props.top === 'number' ? `${props.top}rpx` : props.top;
  return {
    top: topValue,
    ...props.style
  };
});

// 获取单个项目的样式（现在由CSS统一管理，不再需要动态样式）
const getItemStyle = (item) => {
  return {};
};

// 点击项目
const onItemClick = (item) => {
  if (!item.enabled) return;
  
  selectedItem.value = item;
  showModal.value = true;
  emit('itemClick', item);
};

// 关闭弹窗
const onCloseModal = () => {
  showModal.value = false;
  selectedItem.value = null;
};
</script>

<style lang="scss" scoped>
.sidebar {
  position: fixed;
  z-index: 1000;

  &.sidebar-right {
    right: 20rpx;
  }

  &.sidebar-left {
    left: 20rpx;
  }

  .sidebar-container {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 60rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
    padding: 20rpx 6rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20rpx;
    width: 72rpx;
    height: 160rpx;
  }

  .sidebar-item {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 12rpx;

    &:active {
      transform: scale(0.95);
      background: rgba(0, 0, 0, 0.05);
    }

    .sidebar-icon {
      width: 48rpx;
      height: 48rpx;
    }
  }
}

// 响应式适配
@media (max-width: 750rpx) {
  .sidebar {
    &.sidebar-right {
      right: 15rpx;
    }

    &.sidebar-left {
      left: 15rpx;
    }

    .sidebar-container {
      padding: 18rpx 4rpx;
      gap: 16rpx;
      border-radius: 54rpx;
      width: 64rpx;
      height: 140rpx;
      background: rgba(255, 255, 255, 0.8);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .sidebar-item {
      width: 70rpx;
      height: 70rpx;
      border-radius: 10rpx;

      .sidebar-icon {
        width: 42rpx;
        height: 42rpx;
      }
    }
  }
}
</style>
